<script type="text/x-template" id="simple-form">
    <i-form :model="model" :label-width="80">
        <template v-for="(fields, idx) in lines">
            <Row :gutter="16">
                <i-col v-for="field in fields" :key="field.key" :span="field.SPAN || 24">
                    <form-item :label="field.label" :required="field.required" >
                        <i-input v-if="field.type=='INPUT'" type="text" v-model="model[field.key]" clearable :placeholder="field.placeholder || '请输入内容'" />
                        <i-input v-if="field.type=='TEXTAREA'" type="textarea" v-model="model[field.key]" :rows="field.rows" clearable :placeholder="field.placeholder || '请输入内容'" />
                        <InputNumber v-if="field.type=='NUMBER'" v-model="model[field.key]" style="width: 100%;" clearable :placeholder="field.placeholder || '请输入内容'" />
                        <DatePicker v-if="field.type=='DATE'" type="date" v-model="model[field.key]" style="width: 200px" :placeholder="field.placeholder || '请选择日期'" :transfer="true" @on-change="(date) => onChangeDate(field.key, date)" />
                        <image-upload v-if="field.type=='INAMGE'" v-model="model[field.key]" />
                        <image-upload v-if="field.type=='INAMGES'" :muti="true" v-model="model[field.key]" />
                        <summernote v-if="field.type=='EDITOR'" v-model="model[field.key]" />
                    </form-item>
                </i-col>
            </Row>
        </template>
    </i-form>
</script>
<script>
    Vue.component('SimpleForm', {
        template: '#simple-form',
        props: {
            lines: {
                type: Array,
                default: () => []
            },
        },
        mounted() {
        },
        data () {
            return {
                model: {}
            }
        },
        methods: {
            init(lines, data) {
                const parseVal = {}
                lines.forEach(fields => {
                    fields.forEach(field => {
                        let val = data[field.key]
                        if(val === undefined) {
                            if(field.default !== undefined) {
                                parseVal[field.key] = field.default
                            }
                            else if(field.type == 'NUMBER' || field.type == 'PRICE') {
                                parseVal[field.key] = 0
                            }
                        } else {
                            if(field.type == 'NUMBER' || field.type == 'PRICE') {
                                val = parseFloat(val)
                            }
                            parseVal[field.key] = val
                        }
                    })
                })
                this.model = {...data, ...parseVal}
                // this.$set(this.model, field.key, val)
            },
            getData() {
                return this.model
            },
            onChangeDate(key, date) {
                this.model[key] = date
            },
            submit(url, callback) {
                // this.$Message.error({})
                post(url, this.model, callback)
            }
        }
    })
</script>